<template>
	<view>
		<view class="louis-font-40">
			基础用法
			<view class="louis-font-30rpx louis-margin-20rpx">
				<view class="">
					默认按钮:louis-button-default
				</view>
				<view class="">
					主要按钮:louis-button-primary
				</view>
				<view class="">
					成功按钮:louis-button-success
				</view>
				<view class="">
					信息按钮:louis-button-info
				</view>
				<view class="">
					警告按钮:louis-button-warning
				</view>
				<view class="">
					危险按钮:louis-button-danger
				</view>
			</view>
		</view>
		<view class="louis-button-default  louis-margin-20">
			默认按钮
		</view>
		
		<view class="louis-button-primary louis-opacity louis-margin-20">
			主要按钮
		</view>
		
		
		<view class="louis-button-success louis-margin-20">
			成功按钮
		</view>
		
		<view class="louis-button-info louis-margin-20">
			信息按钮
		</view>
		
		<view class="louis-button-warning louis-margin-20">
			警告按钮
		</view>
		
		<view class="louis-button-danger louis-margin-20">
			危险按钮
		</view>
		
		<view class="louis-font-30rpx louis-margin-20rpx">
			<view class="">
				默认按钮:louis-default-plain
			</view>
			<view class="">
				主要按钮:  louis-primary-plain
			</view>
			<view class="">
				成功按钮:  louis-success-plain
			</view>
			<view class="">
				信息按钮:  louis-info-plain
			</view>
			<view class="">
				警告按钮:  louis-warning-plain
			</view>
			<view class="">
				危险按钮:  louis-danger-plain
			</view>
		</view>
		<view class="louis-b-p-p  louis-margin-20">
			朴素按钮
		</view>
		
		<view class="louis-b-p-s  louis-margin-20">
			主要按钮
		</view>
		
		
		<view class="louis-b-p-i  louis-margin-20">
			成功按钮
		</view>
		
		
		<view class="louis-b-p-i  louis-margin-20">
			信息按钮
		</view>
		
		<view class="louis-b-p-w  louis-margin-20">
			警告按钮
		</view>
		
		<view class="louis-b-p-d  louis-margin-20">
			危险按钮
		</view>
	
	<view class="louis-font-30rpx louis-margin-20rpx">
		可自行设置louis-round-8rpx 的值 ，支持百分比和px
		louis-round-20%  louis-round-20px
		<view class="">
			圆角按钮:louis-button-primary louis-round-8rpx
		</view>
		<view class="">
			危险按钮:  louis-button-danger  louis-round-14rpx
		</view>
	</view>
		<view class="louis-round-8rpx louis-button-primary louis-margin-20 ">
			圆角按钮
		</view>
		<view class="louis-round-14rpx louis-button-danger louis-danger-plain louis-margin-20">
			危险按钮
		</view>
		
		
		
		
	</view>

</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
		mounted() {
			
		},
		methods:{
			
		}
	}
</script>

<style scoped lang="less">

</style>
